<template>
  <div :id="idName" :style="{ width: width, height: height }" />
</template>

<script>
export default {
  props: {
    idName: {
      type: String,
      default: 'chart-bar'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.initChart();
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    // 释放图表实例
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(document.getElementById(this.idName));
      this.chart.setOption(this.getOptions());
    },

    getOptions() {
      const option = {
        backgroundColor: 'transparent',
        tooltip: {
          // confine: true,
          // trigger: 'axis',
          // axisPointer: {
          //   type: 'shadow',
          // },
          // backgroundColor: 'rgba(3, 16, 42, 0.85)',
          // borderColor: 'rgba(114, 190, 253, 0.6)',
          // borderWidth: 1,
          // padding: 12,
          // formatter: '{b0}：{c0}',
          show: true
        },
        animation: true,
        grid: {
          bottom: '15%',
          right: '5%'
        },
        xAxis: {
          data: ['和盛镇', '万春镇', '柳城街道', '天府街道', '涌泉街道'],
          axisLine: {
            lineStyle: {
              color: '#BAE7FF'
            }
          },
          axisTick: {
            lineStyle: {
              color: '#ffffff'
            }
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: true,
            margin: 14,
            fontSize: 11,
            color: '#ffffff'
          }
        },
        yAxis: [
          {
            nameTextStyle: {
              fontSize: 11,
              color: '#BAE7FF'
            },
            splitArea: { show: false },
            type: 'value',
            gridIndex: 0,
            minInterval: 1,
            max: 9000,
            // interval: 0,
            splitNumber: 5,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false,
              margin: 14,
              fontSize: 11,
              color: '#BAE7FF'
            },
            data: [9000, 800, 6000, 4000, 2000, 0]
          },
          {
            type: 'value',
            nameTextStyle: {
              color: '#ffffff',
              fontSize: 16
            },
            splitLine: {
              show: false,
              lineStyle: {
                width: 1,
                color: '#CED2DB'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false, // 隐藏X轴轴线
              lineStyle: {
                color: '#163a5f',
                width: 2
              }
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: '#ffffff',
                fontSize: 14
              }
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: 22,
            itemStyle: {
              // @ts-ignore
              normal: {
                color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: '#4FCAE2'
                  },
                  {
                    offset: 1,
                    color: '#4FCAE2'
                  }
                ])
              }
            },
            data: [8300, 8700, 3800, 8250, 6300],
            z: 10,
            zlevel: 0
          },
          {
            // 分隔
            type: 'pictorialBar',
            itemStyle: {
              normal: {
                color: 'rgba(24, 27, 36, 0.63)'
              }
            },
            symbolRepeat: 'fixed',
            symbolMargin: 4,
            symbol: 'rect',
            symbolClip: true,
            symbolSize: [22, 5],
            symbolPosition: 'start',
            symbolOffset: [1, 1],
            data: [8300, 8700, 3800, 8250, 6300],
            width: 2,
            z: 0,
            zlevel: 1
          },
          {
            name: '外框',
            type: 'bar',
            barGap: '-110%', // 设置外框粗细
            barWidth: 22,
            itemStyle: {
              normal: {
                // color: 'transparent', // 填充色
                // barBorderRadius: 0, //圆角半径
                label: {
                  // 标签显示位置
                  show: false,
                  position: 'top' // insideTop 或者横向的 insideLeft
                }
              }
            },
            z: 0
          },
          {
            name: '年',
            type: 'line',
            showAllSymbol: true, // 显示所有图形。
            yAxisIndex: 1,
            symbol: 'circle', // 标记的图形为实心圆
            symbolSize: 4, // 标记的大小
            z: 15,
            zlevel: 2,
            itemStyle: {
              color: '#E9BD02',
              borderWidth: '2',
              borderColor: '#E9BD02'
            },
            lineStyle: {
              color: '#E9BD02'
            },
            data: [21, 24, 8, 22, 16]
          }
        ]
      };
      return option;
    }
  }
};
</script>
